<template>
    <div id="box">
        <div class="header">
            <div class="headerCon">
                <div style="width: 70px;">
                    <i @click="$router.back(-1)" class="el-icon-arrow-left"></i>
                </div>
                <h4>
                    小吴餐馆
                </h4>
                    <el-button @click.native.stop="publish" plain>发布</el-button>
            </div>
        </div>
        <div class="content">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="display: flex;justify-content: center;font-size: 25px">
                    <span v-if="score==5">
                        {{value[value.length-1]}}
                    </span>
                    <span v-else-if="score==4">
                        {{value[value.length-2]}}
                    </span>
                    <span v-else-if="score==3">
                        {{value[value.length-3]}}
                    </span>
                    <span v-else-if="score==2">
                        {{value[value.length-4]}}
                    </span>
                    <span v-else>
                        {{value[value.length-5]}}
                    </span>
                </div>
                <div class="text item">
                    <el-rate
                            style="display: flex;justify-content: center;align-items: center"
                            v-model="score"
                            @change="change"
                            :colors="colors"
                    >
                    </el-rate>
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>评价内容</span>
                </div>
                <div class="text item">
                    <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入您的评价内容"
                            v-model="textarea">
                    </el-input>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "evaluate",
        data(){
            return {
                value: ['极差','失望','一般','满意','惊喜'],
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                score:5,
                textarea:'',
                orderInfo:''
            }
        },
        methods:{
            change(score){
                this.score = score
            },
            publish(){
                if(this.textarea==''){
                    return this.$message('请输入评价内容')
                }
                let data = {
                    evaluationContent:this.textarea,
                    evaluationScore:this.score,
                    orderId:this.$route.params.id,
                    userId:this.$store.state.user.userId
                }
                this.$axios({
                    method:'post',
                    data,url:'/order/publishEvaluation'
                }).then(r=>{
                    if(r.data.err_code===0){
                        this.$message.success("评价成功")
                        this.$router.push({path:'/order/show',query:{orderId:this.$route.params.id}})
                    }else{
                        this.$message.error("评价失败")
                    }
                }).catch(err=>{
                    this.$message.error('网络异常')
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    #box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
    }
    /deep/.el-rate__icon{
        font-size: 30px;
    }
    /deep/.el-rate__text{
        font-size: 20px;
    }
    .header {
        display: flex;
        justify-content: center;
        height: 80px;
        background-color: #FFCA0D;
        width: 100%;
    }

    .headerCon {
        width: 95%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
            font-size: 30px;
        }
    }

    .content{

        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        >div{
            margin-top: 10px;
            width: 95%;
        }
    }
</style>